<template>
  <div class='coursemain'>
    <div class="course-main">
      <section class="search-container">
        <div class="search-item">
          <div class="title-name">课程方向：</div>
          <div class="all-items">
            <el-tag
                :class="entity.firstCategory === '' ? 'category-poniter' : 'category-poniter-item'"
                effect="plain"
                type="info"
                @click="handlerFirst(-1)"
            >全部</el-tag>
            <el-tag
                :class="entity.firstCategory === item.id ? 'category-poniter' : 'category-poniter-item'"
                effect="plain"
                type="info"
                v-for="item in firstList"
                :key="item.id"
                @click="handlerFirst(item.id)"
            > {{ item.categoryName }}
            </el-tag>
          </div>
        </div>
        <div class="search-item search-item-transition" style="top: 45px;">
          <div class="title-name">课程分类：</div>
          <div class="all-items">
            <el-tag
                :class="entity.secondCategory === '' ? 'category-poniter' : 'category-poniter-item'"
                effect="plain"
                type="info"
                @click="handlerSecond(-1)"
            >全部</el-tag>
            <el-tag
                :class="entity.secondCategory === item.id ? 'category-poniter' : 'category-poniter-item'"
                effect="plain"
                type="info"
                v-for="item in secondList"
                :key="item.id"
                @click="handlerSecond(item.id)"
            > <span v-if="item.categoryName">{{ item.categoryName }}</span>
            </el-tag>
          </div>
        </div>
        <div class="search-item" style="top: 90px;">
          <div class="title-name">课程难度：</div>
          <div class="all-items">
            <el-tag
                :class="entity.courseLevel === '' ? 'category-poniter' : 'category-poniter-item'"
                effect="plain"
                type="info"
                @click="handerLevel(-1)"
            >全部</el-tag>
            <el-tag
                :class="entity.courseLevel === item.code ? 'category-poniter' : 'category-poniter-item'"

                effect="plain"
                type="info"
                v-for="item in courseLevel"
                :key="item.code"
                @click="handerLevel(item.code)"
            >  {{ item.text }}
            </el-tag>
          </div>
        </div>
      </section>
    </div>
    <!-- 商品列表 -->
    <div class='main-container'>
      <div class="container-top">
        <ul class="all">
          <li class="item" :style="{color: changeTextColor('clicks')}" @click="handlerSort('clicks')">综合</li>
          <li class="item split">|</li>
          <li class="item" :style="{color: changeTextColor('time')}" @click="handlerSort('time')">最新课程</li>
          <li class="item split">|</li>
          <li class="item" :style="{color: changeTextColor('purchase')}" @click="handlerSort('purchase')">最多购买 </li>
          <li class="item split">|</li>
          <li class="item-price">
            <span style="cursor: pointer" :style="{color: changeTextColor('price')}" @click="handlerSort('price')">价格</span>
            <span class="arrow">
              <el-icon>
                <CaretTop :color="entity.sortBy==='price-asc'?'red':''"/>
              </el-icon>
              <el-icon>
                <CaretBottom :color="entity.sortBy==='price-desc'?'red':''"/>
              </el-icon>
            </span>
          </li>
        </ul>
        <ul class="right">
          <li class="right-item">
            <el-radio-group v-model="courseFee" @change="getCourseList">
              <el-radio :label="1">免费课程</el-radio>
              <el-radio :label="0">会员课程</el-radio>
              <el-radio :label="-1">全部课程</el-radio>
            </el-radio-group>
          </li>
        </ul>
      </div>
      <div class="container-body">
        <div class="newCourseContent">
          <ul class="courseUl">
            <li class='courseItem' @click="goCourseDetail(item.id)" v-for="item in courseList" :key="item.id">
              <div class='courseInfo'>
                <div class='courseBg'>
                  <img :src='item.courseCover'>
                </div>
                <div class="courseName">{{ item.courseName }}</div>
                <div class="courseDegree">{{ courseType(item.courseLevel) }} · {{ item.purchaseCnt }}人报名</div>
                <div class="coursePriceZero" v-if="item.discountPrice === 0">
                  <div class="pricefree">免费学习</div>
                  <img src="../../assets/img/free.png" alt="">
                </div>
                <div class="coursePrice" v-else-if="item.isMember === 1">
                  <div class="courseMemberbg"><span class="courseMember">会员免费</span></div>
                  <div class="price">¥ {{item.discountPrice}}</div>
                </div>
                <div class="coursePricePri" v-else>
                  <div class="pricePri">¥ {{item.discountPrice}}</div>
                </div>
              </div>
            </li>
          </ul>
          <!-- 分页器 -->
          <el-pagination
              style="display:flex;justify-content:center;margin-bottom:10px;text-align:center;width:100%"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[4, 8, 16, 32]"
              :page-size="limit"
              layout="prev, pager, next, jumper, '->', total, sizes, "
              :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { CaretBottom, CaretTop} from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { getFirstCategorys, getSecondCategorys, getCourse} from '@/api/api'
import minxis from '@/mixins/courseType'

const router = useRouter()
const route = useRoute()
let { courseType } = minxis()

// 一级分类数据
let firstList = ref([])
// 二级分类数据
let secondList = ref([])
// 课程难度
let courseLevel = ref([
  {text: '初级', code: 1},
  {text: '中级', code: 2},
  {text: '高级', code: 3},
])
// 搜索课程相关
let courseList = ref([])
let courseFee = ref(-1)
let page = ref(1)
let limit = ref(8)
let total = ref(0)
let searchInfo = reactive({
  pageNum: 1, 			// int   页码，默认1
  pageSize: 8,
  entity:{
    firstCategory:'',		//string	一级分类ID
    secondCategory:'',	//	string	二级分类ID
    tags:'',				//string	知识点
    isMember:'',			//string	会员课程（传1）
		isFree: '',				//string	免费课程（传1）
		courseLevel:'',		//	string	课程等级（1：初级；2：中级；3：高级）
		sortBy:'',
    //string	排序方式（
    // 1：点击量倒序：clicks-desc；2：点击量正序：clicks-asc；
    // 3：时间倒序：time-desc；4：时间正序：time-asc；
    // 5：售价倒序：price-desc；6：售价正序：price-asc；
    // 7：购买数倒序：purchase-desc；6：购买数正序：purchase-asc）
}
})
let { entity } = searchInfo

onMounted(async ()=>{
  firstList.value = (await getFirstCategorys()).data.list
  secondList.value = (await getSecondCategorys(-1)).data.list
  getCourseList()
})

// 点击课程方向(一级分类时)
const handlerFirst = async (id)=>{
  secondList.value = (await getSecondCategorys(id)).data.list
  // 获取课程列表
  id === -1 ?　searchInfo.entity.firstCategory = ''　: searchInfo.entity.firstCategory = id
  searchInfo.entity.secondCategory = '' //清空二级分类
  await getCourseList()
  console.log(courseList)
}
// 点击课程分类(二级分类时)
const handlerSecond = (id)=>{
  // 获取课程列表
  id === -1 ?　searchInfo.entity.secondCategory = ''　: searchInfo.entity.secondCategory = id
  getCourseList()
}
// 点击课程难度时
const handerLevel = (code)=>{
  code === -1 ?　searchInfo.entity.courseLevel = ''　: searchInfo.entity.courseLevel = code
  getCourseList()
}
// 获取课程列表
let getCourseList = async (label) => {
  if (label === 1) {
    searchInfo.entity.isFree = 1
    searchInfo.entity.isMember = 0
  } else if (label === 0){
    searchInfo.entity.isFree = 0
    searchInfo.entity.isMember = 1
  } else {
    searchInfo.entity.isFree = 0
    searchInfo.entity.isMember = 0
  }
  let info = (await getCourse(searchInfo)).data
  courseList.value = info.pageInfo.list
  total.value = info.pageInfo.total
}
// handleSizeChange
const handleSizeChange = (size)=>{
  limit.value = size
  searchInfo.pageSize = size
  getCourseList()
}
// handleCurrentChange
const handleCurrentChange = (pageNo)=>{
  page.value = pageNo
  searchInfo.pageNum = page
  getCourseList();
}
// 排序方式
let clicksFlag = ref(0)
let timeFlag = ref(0)
let purchaseFlag = ref(0)
let priceFlag = ref(0)
// 1：点击量倒序：clicks-desc；2：点击量正序：clicks-asc；
// 3：时间倒序：time-desc；4：时间正序：time-asc；
// 5：售价倒序：price-desc；6：售价正序：price-asc；
// 7：购买数倒序：purchase-desc；6：购买数正序：purchase-asc）
// 排序方式
const handlerSort = (type)=>{
  if (type === 'clicks') {
    let clicksFlag1 = ''
    clicksFlag1 = clicksFlag.value % 2 === 1 ? 'clicks-desc' : 'clicks-asc'
    searchInfo.entity.sortBy = String(clicksFlag1)
    clicksFlag.value ++
  } else if (type === 'time') {
    let timeFlag1 = ''
    timeFlag1 = timeFlag.value % 2 === 1 ? 'time-desc' : 'time-asc'
    searchInfo.entity.sortBy = String(timeFlag1)
    timeFlag.value ++
  } else if (type === 'purchase') {
    let purchase1 = ''
    purchase1 = purchaseFlag.value % 2 === 1 ? 'purchase-desc' : 'purchase-asc'
    searchInfo.entity.sortBy = String(purchase1)
    purchaseFlag.value ++
  } else {
    let price1 = ''
    price1 = priceFlag.value % 2 === 1 ? 'price-desc' : 'price-asc'
    searchInfo.entity.sortBy = String(price1)
    priceFlag.value ++
  }
  console.log(entity.sortBy.split('-')[0])
  getCourseList()
}
// 排序的文字颜色选择时
const changeTextColor = (type)=>{
   return entity.sortBy.split('-')[0]===type ? '#2c80ff' : ''
}
// 课程详情跳转
const goCourseDetail = (courseId)=>{
  localStorage.setItem('courseId',courseId)
  router.push({
    name: 'CourseInfo',
    params:{
      courseId
    },
  })
}
</script>


<style scoped>
.course-main {
  padding: 20px 0;
  width: 100%;
  height: 130px;
  background: #f3f5f9;
}
.search-container{
  width: 1200px;
  margin: 0 auto;
  position: relative;
  height: 100%;
}
.search-item{
  display: flex;
  overflow: hidden;
  cursor: pointer;
  position: absolute;
  height: 45px;
  transition: all 0.5s;
}
/*.search-item-transition:hover{*/
/*  z-index: 777;*/
/*  height: auto;*/
/*  box-shadow: rgb(95 101 105) 0 12px 20px 0px;*/
/*  border-radius: 8px;*/
/*  background: rgba(255,255,255, 255);*/
/*}*/
.search-item .title-name {
  width: 100px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 25px;
  text-align: justify;
  color: #333333;
  padding: 10px;
  opacity: 1;
}
.search-item .title-name:after {
  content: '.';
  width: 100%;
  display: inline-block;
  overflow: hidden;
  height: 0;
}

.search-item .all-items{
  width: calc(100% - 120px);
  min-height: 25px;
  display: flex;
  flex-wrap: wrap;
}
.title .all-list {
  width: 40px;
  height: 25px;
  line-height: 25px;
  border-radius: 4px;
  padding: 0 10px;
  align-items: center;
  text-align: center;
}

.title .all {
  opacity: 1;
  color: #2c80ff;
}

.title .item {
  height: 25px;
  line-height: 25px;
  margin: 0 15px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 21px;
  opacity: 1;
}

.title .item .active {
  color: #2c80ff;
}

.category-poniter {
  height: 25px;
  line-height: 25px;
  margin: 10px 5px;
  cursor: pointer;
  border: none;
  background: rgba(44, 128, 255, 0.1);
  color: #2c80ff;
}
.category-poniter-item {
  height: 25px;
  line-height: 25px;
  margin: 10px 5px;
  cursor: pointer;
  border: none;
  background: none;
  color: rgba(81, 87, 89, 1);
}

.main-container {
  width: 1200px;
  margin: 0 auto;
}

.container-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.all {
  display: flex;
  padding-top: 20px;
  font-size: 16px;
  color: #515759;
}

.all .item:first-child {
  margin-right: 20px;
}

.all .item {
  margin: 0 10px;
  cursor: pointer;
}

.right {
  display: flex;
  padding-top: 20px;
  font-size: 16px;
  color: #515759;
}

.right .right-item {
  margin-left: 10px;
}

.right .right-items {
  margin-right: 0px;
}

.arrow {
  position: relative;
}

.arrow i:first-child {
  position: absolute;
  top: -1px;
}

.arrow i:last-child {
  position: absolute;
  top: 7px;
}

.check {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.up {
  position: absolute;
  top: 5px;
  left: 2px;
}

.down {
  position: absolute;
  top: 15px;
  left: 2px;
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* IE 9 */
  -moz-transform: rotate(180deg); /* Firefox */
  -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
  -o-transform: rotate(180deg); /* Opera */
}
.newCourseContent {
  width: 1200px;
  margin: 30px auto 0px auto;
}

.newCourseContent .courseUl {
  display: flex;
  flex-wrap: wrap;
}

.courseItem{
  width: 285px;
  height: 280px;
  margin: 0 20px 20px 0;
  transition: margin-top 0.2s;
}
.courseItem:hover{
  margin-top: -10px;
  cursor: pointer;
}
.courseItem:nth-child(4n+0){
  margin-right: 0 !important;
}
.courseInfo{
  position: relative;
  width: 100%;
  height: 270px;
  background: #ffffff;
  box-shadow: 1px 1px 10px rgb(27 39 94 / 40%);
  opacity: 1;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  overflow: hidden;
  text-decoration: none;
}
.courseBg{
  position: relative;
  width: 100%;
  height: 160px;
}
.courseBg img{
  width: 100%;
  height: 100%;
}
.courseName{
  margin: 10px;
  font-weight: bold;
  font-size: 14px;
  color: #333333;
  display: -webkit-box;
  overflow: hidden;
}
.courseDegree{
  margin-left: 10px;
  font-size: 12px;
  color: #808080;
}
.coursePrice {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 130px;
  font-size: 14px;
  margin-top: 15px;
  padding: 0 5px;
}
.coursePricePri{
  width: 75px;
  font-size: 14px;
  margin-top: 18px;
  padding: 0 13px;
  color: rgba(255, 114, 127, 1);
  font-weight: 700;
}
.coursePriceZero{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 75px;
  font-size: 14px;
  margin-top: 15px;
  padding: 0 10px;
  color: rgba(53, 134, 255, 1);
}
.courseMemberbg {
  position: relative;
  width: 80px;
  height: 20px;
  color: #ffffff;
  background: linear-gradient(90deg, #ff928e 0%, #fe7062 99%);
  border-radius: 24px 0px 24px 0px;
}
.courseMember {
  position: absolute;
  line-height: 20px;
  left: 13px;
  font-weight: 700;
}
.price {
  line-height: 25px;
  left: 100px;
  color: #ff727f;
  font-weight: 700;
}
</style>
